<template>

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题" prop="title" :error="errors.title">
            <el-input v-model="form.title" clearable></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description" :error="errors.description">
            <el-input type="textarea" v-model="form.description" clearable></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content" :error="errors.content">
            <el-tabs v-model="contentTypeTab">
                <el-tab-pane label="富文本" name="richtext">
                    <quill-editor v-model="contentByType.richtext"
                                  :options="editorOption"
                                  ref="quillEditor">
                    </quill-editor>
                </el-tab-pane>
                <el-tab-pane label="视频" name="video">
                    <vod-player v-if="contentByType.video" :video-id="contentByType.video"></vod-player>
                    <vod-upload @complete="completeUploadVideo"></vod-upload>
                </el-tab-pane>

            </el-tabs>

        </el-form-item>
        <el-form-item label="课程类型" prop="course_type" :error="errors.course_type">
            <el-radio-group v-model="form.course_type">
                <el-radio-button v-for="(course_type,key) in courseTypes" :label="key" :key="key">
                    {{course_type}}
                </el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="经验值" prop="exp" :error="errors.exp">
            <el-input-number v-model="form.exp" :min="0" label="经验值"></el-input-number>
        </el-form-item>
        <el-form-item label="深度值" prop="depth" :error="errors.depth">
            <el-input-number v-model="form.depth" :min="0" label="深度值"></el-input-number>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">完成</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import VodUpload from './VodUpload'
    import VodPlayer from './VodPlayer'

    export default {
        props: {courseId: Number, errors: Object}, components: {
            VodUpload, VodPlayer
        }, data() {
            return {
                form: {
                    title: null,
                    description: null,
                    course_type: 0,
                    exp: 0,
                    depth: 0
                },
                contentByType: {
                    richtext: '',
                    video: ''
                },
                contentTypeTab: 'richtext',
                courseTypes: {
                    0: '主线任务',
                    1: '支线任务',
                    2: '实践任务',
                },
                editorOption: {
                    modules: {
                        toolbar: [
                            [{'size': ['small', false, 'large']}],
                            ['bold', 'italic'],
                            [{'list': 'ordered'}, {'list': 'bullet'}],
                            ['link', 'image']
                        ],
                        history: {
                            delay: 1000,
                            maxStack: 50,
                            userOnly: false
                        },
                        imageDrop: true,
                        // imageResize: {
                        //     displayStyles: {
                        //         backgroundColor: 'black',
                        //         border: 'none',
                        //         color: 'white'
                        //     },
                        //     modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
                        // }

                    }
                }
            }
        }, methods: {
            onSubmit() {
                let form = this.form;
                switch (this.contentTypeTab) {
                    case 'richtext':
                        form.content_type = 0;
                        break;
                    case "video":
                    default:
                        form.content_type = 1;
                }
                form.content = this.contentByType[this.contentTypeTab];
                this.$emit('complete', form);
            }, getCourse() {
                axios.get('courses/' + this.courseId).then((response) => {
                    this.form.title = response.data.data.title;
                    this.form.description = response.data.data.description;

                    this.form.course_type = response.data.data.course_type;
                    this.form.exp = response.data.data.exp;
                    this.form.depth = response.data.data.depth;
                    switch (response.data.data.content_type) {
                        case 1:
                            this.contentTypeTab = 'video';
                            this.contentByType.video = response.data.data.content;
                            break;
                        case 0:
                        default:
                            this.contentTypeTab = 'richtext';
                            this.contentByType.richtext = response.data.data.content;
                    }

                })
            }, completeUploadVideo(uploadInfo) {
                this.contentByType.video = uploadInfo.videoId;
                console.log(this.contentByType);
            }
        }, watch: {
            courseId() {
                this.getCourse();
            }
        }, created() {
            if (this.courseId) {
                this.getCourse();
            }
        }
    }
</script>